<script setup>

import {ref,computed,watch} from 'vue'
const emit = defineEmits({'selectChange':null,'show':null,'edit':null,'del':null,'getDataList':null})
const props = defineProps(['data','labels','op','select','dataCount','paging'])

// 跳转页面数
const jumpPage = ref('')
// 每页显示数
const pagesize = ref(10)
// 当前页数
const currentPage = ref(1)
// 当前选择的数据
const selectRows = ref()
// 页数选择
const pageOptions = ref([
  {value:'10页/条',key:10},
  {value:'15页/条',key:15},
  {value:'20页/条',key:20},
])

// 获取用户列表数据
// 为选择的数据添加高亮
const tableRowClassName = ({row}) => {

  return selectRows.value && selectRows.value.includes(row) ? "row-highLight no-hover" : ''
}
// 选择数据的处理
const handleSelectionChange = (selection) => {
  selectRows.value = selection
  emit('selectChange',selectRows.value)
}
// 跳转input限制
const handleJumpPageInput = () => {
      // 仅保留数字，移除其他字符
      jumpPage.value = jumpPage.value.replace(/\D/g, '');
}
// 最大页码
const maxPage = computed(() => {
  return Math.ceil(props.dataCount / pagesize.value)
})
// 跳转处理
const handleJumpPageChange = () => {
  if(jumpPage.value === null) return
  if(jumpPage.value < 1) {
    jumpPage.value = 1
  }else if(jumpPage.value > maxPage.value) {
    jumpPage.value = maxPage.value
  }
  currentPage.value = Number(jumpPage.value)
}

// 一旦pageSize 或者 page发生变化,重新通过父组件获取数据
watch(pagesize,(newVal) => {
  const newMaxPage = Math.ceil(props.dataCount / newVal)
  if (currentPage.value > newMaxPage) {
    currentPage.value = newMaxPage // 调整为最大页码
  }
  emit('getDataList',newVal,currentPage.value)
})
watch(currentPage, (newVal) => {
   emit('getDataList',pagesize.value,newVal)

})

// 重新获取数据
const getDataList = () => {
  console.log(pagesize.value,currentPage.value);
  emit('getDataList',pagesize.value,currentPage.value)
}

defineExpose({
  getDataList
})
</script>

<template>
      <el-table
        ref="multipleTableRef"
        :data="data"
        style="width: 100%"
        size="default"
        :border="true"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        max-height="60vh"
        :table-layout="'auto'"
      >
        <el-table-column type="selection"  align="center" v-if="select"/>
        <el-table-column v-for="(item) in labels" :key="item.id"
        :label="item.key"
         align="center" :prop="item.value">
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="120px" v-if="op">
          <template #default="{row}">
            <el-button size="small" @click="emit('show',row.id)">
              <el-icon><View /></el-icon>
            </el-button>
            <el-button
              size="small" @click="emit('edit',row.id)">
              <el-icon><Edit /></el-icon>
            </el-button>
            <el-button
              size="small" @click="emit('del',row.id)">
              <el-icon><Delete /></el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-management" v-if="paging">
        <div class="show-page">
          共 {{ dataCount }} 条
        </div>
        <el-pagination
          :pager-count="5"
          v-model:current-page="currentPage"
          v-model:page-size="pagesize"
          size="large"
          :page-sizes="[10,20,30]"
          layout="prev, pager, next"
          :total="dataCount"
        />
        <div class="page_selector">
          <el-select
              placeholder=""
              size="default"
              style="width: 100px"
              v-model="pagesize"
            >
              <el-option
                v-for="item in pageOptions"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
          </el-select>
        </div>
        <div class="page-jump">
          <span>跳至</span>
          <el-input v-model="jumpPage" style="width: 80px" size="default" @change="handleJumpPageChange"
          @input="handleJumpPageInput"/>
          <span>页</span>
        </div>
      </div>
</template>

<style lang="less" scoped>
.page-management {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  .show-page {
    line-height: 50px;
  }
}

::v-deep .el-pager li.is-active{
  border: 1px solid #378aff;
}

.page_selector ,.page-jump{
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-jump {
  margin-left: 10px;
  ::v-deep .el-input {
    margin: 7px;
  }
}
</style>
